<template>
  <div class="policy-view">
    <div class="policy-container">
      <DataPolicy :width="policyChart.width" :height="policyChart.height" />
    </div>
  </div>
</template>

<script>
import { Chart } from '@/config/chart'
import { adjust } from '@/utils/adjust'

import DataPolicy from './charts/DataPolicy'
export default {
  name: 'PolicyView',
  components: {
    DataPolicy
  },
  data() {
    return {
      policyChart: new Chart('0px', '0px', 0, null, null)
    }
  },
  mounted() {
    this.policyChart.dom = document.querySelector('.policy-container')

    adjust(this.policyChart)
  },
  beforeDestroy() {
    const p = this.policyChart
    if (p) {
      p.observer.unobserve(p.dom)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/frostedGlass.scss';

.policy-view {
  height: 100%;

  .policy-container {
    position: absolute;
    top: 53%;
    left: 50%;
    width: 95vw;
    height: 83%;
    transform: translate(-50%, -50%);

    @include glass;
  }
}
</style>
